<template>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li v-for="(crumb, index) in breadcrumbs" :key="index" class="breadcrumb-item" :class="{ active: index === breadcrumbs.length - 1 }">
        <router-link v-if="index !== breadcrumbs.length - 1" :to="{ name: crumb.name }">{{ crumb.title }}</router-link>
        <span v-else>{{ crumb.title }}</span>
      </li>
    </ol>
  </nav>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const breadcrumbs = computed(() => {
      return route.matched.filter(record => record.meta && record.meta.title).map((record, index, array) => ({
        path: array.slice(0, index + 1).reduce((path, r) => `${path}/${r.path}`, ''),
        title: record.meta.title,
        name: record.name
      }));
    });

    return {
      breadcrumbs
    };
  }
};
</script>

<style scoped>
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 12px;
}

.breadcrumb-item {
  display: inline-block;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  padding: 0 5px;
}

.breadcrumb-item a {
  text-decoration: none;
  color: var(--text-active);
}

.breadcrumb-item.active {
  color: #6c757d;
}
</style>